<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:comp="http://facelets.mycomponents.com">
<h:head>
    <title>ScrumApp</title>
    <link type="text/css" rel="stylesheet" href="resources/css/style.css" />
    <link type="text/css" rel="stylesheet" href="resources/css/theme.css"/>
    <link type="text/css" rel="stylesheet" href="resources/css/primefacesSkin.css"/>
    <script type="JavaScript" src="scripts/handleDialogComplete.js"></script>
    <script type="JavaScript" src="scripts/limitTextArea.js"></script>
</h:head>

<h:body>
    <f:view locale="#{Language.locale}">
        <f:loadBundle basename="resources.messages.Messages" var="msgBundle"/>
        <div id="container">
            <div id="header">
                <h2>ScrumApp</h2>
                <div id="topmenu">
                    <ul>
                        <li><a href="/ScrumApp/faces/Project.xhtml">#{msgBundle.project}</a></li>
                        <li class="current"><a href="/ScrumApp/faces/ProductBacklog.xhtml">#{msgBundle.product_backlog}</a></li>
                        <li><a href="/ScrumApp/faces/SprintBacklog.xhtml">#{msgBundle.sprint_backlog}</a></li>
                        <li><a href="/ScrumApp/faces/SprintList.xhtml">#{msgBundle.sprint_list}</a></li>
                        <li><a href="/ScrumApp/faces/Impediments.xhtml">#{msgBundle.impediments}</a></li>
                        <li><a href="/ScrumApp/faces/People.xhtml">#{msgBundle.people}</a></li>
                        <li><a href="/ScrumApp/faces/Charts.xhtml">#{msgBundle.charts}</a></li>
                        <li><a href="/ScrumApp/faces/Taskboard.xhtml">Task Board</a></li>
                    </ul>
                </div>
            </div>
            <div id="top-panel">
                <comp:chooseProject/>
            </div>

            <div id="content">

                <h:form prependId="false" styleClass="form">
                    <div class="extendedbox" align="center" >
                        <h3>
                            <h:outputText value="#{msgBundle.product_backlog}" />
                            <p:commandLink oncomplete="createDialog.show();" value="#{msgBundle.new_product}" styleClass="add" type="button" />
                        </h3>
                        <h2 style="margin-left: 20px" ><h:outputText value="#{productBean.project.projectName}" /></h2>
                        <div style="font-size: 10px" >
                            <p:dataTable id="productDatatable" var="item" value="#{productBean.byproject}"
                                         paginator="true" rows="10" emptyMessage="#{msgBundle.no_records_found}" style="width: 95%" >
                                <p:column style="width:16px"><p:rowToggler/></p:column>

                                <p:column style="width:30px">
                                    <f:facet name="header">#{msgBundle.sprint}</f:facet>
                                    <h:outputText value="#{item.sprint.sprintNumber}">
                                        <f:convertNumber type="number"/>
                                    </h:outputText>
                                </p:column>
                                
                                <p:column style="width:45px">
                                    <f:facet name="header">#{msgBundle.priority}</f:facet>
                                    <h:outputText value="#{msgBundle[item.priority.description]}" />
                                </p:column>

                                <p:column>
                                    <f:facet name="header">#{msgBundle.description}</f:facet>
                                    <h:outputText value="#{item.description}" />
                                </p:column>

                                <p:column style="width:65px">
                                    <h:commandButton title="#{msgBundle.manage_tasks}" action="manage_task_redirect" immediate="true" style="padding: 4px; width: 20px; height: 20px; border: transparent; background:transparent url(images/task.png) no-repeat top; cursor:pointer" >
                                        <f:setPropertyActionListener value="#{item}" target="#{productBean.selectedproduct}" />
                                    </h:commandButton>
                                     
                                     <p:commandButton title="#{msgBundle.edit}" update="editPanel" oncomplete="editDialog.show()" style=" width: 20px; height: 20px; border: transparent;  background:transparent url(images/pencil.png) no-repeat bottom;">
                                        <f:setPropertyActionListener value="#{item}" target="#{productBean.selectedproduct}" />
                                    </p:commandButton>

                                     <p:commandButton title="#{msgBundle.delete}" oncomplete="deleteDialog.show()" style="width: 20px; height: 20px; border: transparent;  background:transparent url(images/trashcan.png) no-repeat bottom;" >
                                        <f:setPropertyActionListener value="#{item}" target="#{productBean.selectedproduct}" />
                                    </p:commandButton>
                                </p:column>

                                <f:facet name="expansion">
                                    <div class="ui-widget-content" id="expand" style=" width: 670px; padding: 5px " >
                                        <h1 style=" margin: 7px">#{msgBundle.comments}</h1>
                                        <table width="95%" class="comments">
                                            <tr>
                                                <td><h:outputText value="#{item.comments}"/></td>
                                            </tr>
                                        </table>
                                    </div>
                                </f:facet>
                            </p:dataTable>
                        </div>
                        <br/>
                    </div>

                </h:form>
                <h:form id="createForm" prependId="false" styleClass="form">
                    <p:dialog header="#{msgBundle.create_product}" widgetVar="createDialog" modal="true"
                              resizable="false"  width="600" height="280" draggable="true" >
                        <h:panelGrid id="createPanel" columns="2" cellpadding="4">
                            <h:outputText style="width:50px" value="#{msgBundle.sprint}:"/>
                            <h:selectOneMenu converter="SprintConverter" value="#{productBean.newproduct.sprint}" >
                                <f:selectItem itemValue="" itemLabel="" />
                                <f:selectItems value="#{sprintBean.byproject}" var="object" itemLabel="#{object.sprintNumber}" itemValue="#{object}" />
                            </h:selectOneMenu>
                            <h:outputText value="#{msgBundle.description}: *"/>
                            <h:inputText maxlength="50" style="width:350px" value="#{productBean.newproduct.description}" required="true" />
                            <h:outputText value="#{msgBundle.priority}:"/>
                            <h:selectOneMenu converter="PriorityConverter" value="#{productBean.newproduct.priority}" >
                                <f:selectItems value="#{priorityBean.priorities}" var="object" itemLabel="#{msgBundle[object.description]}" itemValue="#{object}" />
                                </h:selectOneMenu>
                            <h:outputText value="#{msgBundle.comments}:"/>
                            <h:inputTextarea style="width:350px" value="#{productBean.newproduct.comments}"
                                             onkeyup="limitTextArea(this,500);" onkeydown="limitTextArea(this,500);" />
                            <p:commandButton value="#{msgBundle.submit}" style=" margin-top: 10px; font-weight: bold"
                                             action="#{productBean.submitCreate}" oncomplete="createDialogComplete(xhr, status, args)" />
                            <p:commandButton value="#{msgBundle.cancel}" style=" margin-top: 10px; font-weight: bold"
                                             onclick="createDialog.hide()"/>
                        </h:panelGrid>
                    </p:dialog>

                </h:form>
                <h:form prependId="false" styleClass="form">
                    <p:dialog header="#{msgBundle.edit_product}" widgetVar="editDialog" resizable="false" modal="true"
                              width="600" height="280" draggable="true" >
                        <h:panelGrid id="editPanel" columns="2" cellpadding="4">
                            <h:outputText style="width:50px" value="#{msgBundle.sprint}:"/>
                            <h:selectOneMenu converter="SprintConverter" value="#{productBean.selectedproduct.sprint}" >
                                <f:selectItem itemValue="" itemLabel="" />
                                <f:selectItems value="#{sprintBean.byproject}" var="object" itemLabel="#{object.sprintNumber}" itemValue="#{object}" />
                            </h:selectOneMenu>
                            <h:outputText value="#{msgBundle.description}: *"/>
                            <h:inputText maxlength="50" style="width:350px" value="#{productBean.selectedproduct.description}" required="true" />
                            <h:outputText value="#{msgBundle.priority}:"/>
                            <h:selectOneMenu converter="PriorityConverter"  value="#{productBean.selectedproduct.priority}">
                                <f:selectItems value="#{priorityBean.priorities}" var="object" itemLabel="#{msgBundle[object.description]}" itemValue="#{object}" />
                             </h:selectOneMenu>
                            <h:outputText value="#{msgBundle.comments}:"/>
                            <h:inputTextarea style="width:350px" value="#{productBean.selectedproduct.comments}"
                                             onkeyup="limitTextArea(this,500);" onkeydown="limitTextArea(this,500);"/>
                            <p:commandButton value="#{msgBundle.submit}" style=" margin-top: 10px; font-weight: bold"
                                             action="#{productBean.submitEdit}" update="productDatatable" oncomplete="editDialogComplete(xhr, status, args)" />
                            <p:commandButton value="#{msgBundle.cancel}" style=" margin-top: 10px; font-weight: bold"
                                             onclick="editDialog.hide()" type="button" />
                        </h:panelGrid>
                    </p:dialog>

                </h:form>
                <h:form prependId="false" styleClass="form">
                    <p:dialog header="#{msgBundle.delete_product}" widgetVar="deleteDialog" modal="true" resizable="false" draggable="true"  width="450">
                        <table width="100%" style="height: 100px; text-align: left" id="deletePanel">
                            <tr>
                                <td colspan="2" align="center" ><h:outputText value="#{msgBundle.are_you_sure_product}" /></td></tr>
                            <tr>
                                <td align="right" >
                                    <p:commandButton value="#{msgBundle.yes}" style="font-weight: bold"
                                                     update="productDatatable" action="#{productBean.submitDelete}" oncomplete="deleteDialog.hide()" /></td>
                                <td><p:commandButton value="#{msgBundle.no}" style="font-weight: bold"
                                                     onclick="deleteDialog.hide()"/></td></tr>
                        </table>
                    </p:dialog>
                </h:form>
            </div>
            <div id="footer">
                <div id="credits">Template based on another by <a href="http://www.bloganje.com">Bloganje</a>
                </div>
                <br />
            </div>
        </div>
    </f:view>
</h:body>
</html>
